@import "../../style/public";
.memberStoredDataStatistics {
  .noActivity {
    img {
      @include remCalc(width, 477);
      @include remCalc(height, 268);
      @include remCalc(margin, 200, auto, 38);
      display: block;
    }
    .info {
      @include remCalc(padding, 0, 175);
      @include remCalc(font-size, 24);
      @include remCalc(letter-spacing, 2);
      font-family: PingFangSC-Medium;
      color: #bbbbbb;
      text-align: center;
    }
    .btn {
      @include remCalc(width, 220);
      @include remCalc(height, 60);
      @include remCalc(line-height, 60);
      @include remCalc(margin, 60, auto);
      @include remCalc(border-radius, 8);
      background: #ffffff;
      border: 1px solid #459dff;
      font-family: PingFangSC-Medium;
      @include remCalc(font-size, 32);
      color: #459dff;
      text-align: center;
      letter-spacing: 0;
    }
  }
  .warningBox{
    background-color: #FDFCEC;
    color:#F87C36;
    @include remCalc(font-size, 24);
    @include remCalc(line-height, 34);
    @include remCalc(padding, 12,30);
  }
  .list {
    background-color: #fff;
    @include remCalc(padding-left, 30);
    .icon {
      @include remCalc(font-size, 24);
      color: #cccccc;
    }
    .iconPosition {
      position: absolute;
      @include remCalc(margin-left, 8);
      @include remCalc(padding, 30);
      @include remCalc(right, -62);
      @include remCalc(top, -18);
    }
    .listItem {
      display: flex;
      font-family: PingFangSC-Medium;
      @include remCalc(padding, 19, 30, 19, 0);
      align-items: center;
      color: #333333;
      @include remCalc(font-size, 30);
      @include remCalc(line-height, 51);
      @include remCalc(height, 51);
      @include thin-border(false, false, bottom);
      .val {
        flex: 1;
        height: 100%;
      }
    }
    .infoItem {
      @include remCalc(padding, 40, 0, 20, 0);
      @include remCalc(margin-right, 30);
      @include thin-border(false, false, bottom);
      text-align: center;
      .tt {
        position: relative;
        display: inline;
        font-family: PingFangTC-Regular;
        @include remCalc(font-size, 32);
        line-height: 1;
        color: #333333;
      }
      .price {
        font-family: PingFangSC-Medium;
        @include remCalc(font-size, 60);
        line-height: 1;
        color: #333333;
        @include remCalc(margin, 40, 0);
      }
      .itemList {
        display: flex;
        .item {
          flex: 1;
          text-align: center;
          @include remCalc(padding-top, 14);
          .itemTt {
            position: relative;
            display: inline;
            align-items: center;
            font-family: PingFangSC-Regular;
            @include remCalc(font-size, 28);
            color: #999999;
            .iconPosition{
              @include remCalc(top, -26);
            }
            a {
              @include remCalc(margin-left, 8);
              font-family: PingFangSC-Regular;
              color: #459dff;
            }
          }
          .itemPrice {
            font-family: PingFangSC-Medium;
            @include remCalc(font-size, 30);
            color: #333333;
            @include remCalc(margin, 20, 0);
          }
        }
      }
    }
    .infoItem:last-child:after {
      border: 0;
    }
    .noBorder:after {
      border: 0;
    }
    .chartTt {
      font-family: PingFangSC-Regular;
      @include remCalc(font-size, 32);
      @include remCalc(padding-top, 42);
      color: #333333;
      line-height: 1;
      .wordBox{
        position: relative;
        display: inline-block;
        @include remCalc(padding-top, 5);
      }
      span {
        font-family: PingFangSC-Regular;
        @include remCalc(font-size, 24);
        color: #999999;
        text-align: left;
        @include remCalc(padding-left, 10);
      }
    }
    .tabBarBox {
      display: flex;
      justify-content: flex-end;
    }
    .tabBar {
      display: flex;
      border: 1px solid $color-red;
      border-radius: 4px;
      overflow: hidden;
      width: max-content;
      float: right;
      @include remCalc(margin, 40, 30, 0, 0);
      .tabBarItem {
        @include remCalc(width, 100);
        text-align: center;
        @include remCalc(height, 50);
        @include remCalc(line-height, 50);
        @include remCalc(font-size, 20);
        color: $color-red;
        background: #fff;
        border-left: 1px solid $color-red;
        box-sizing: border-box;
        &:first-child {
          border-left: none;
        }
        &.checked {
          background: $color-red;
          color: #fff;
        }
      }
    }
    .chartInfo {
      font-family: PingFangSC-Regular;
      @include remCalc(font-size, 24);
      color: #333333;
      line-height: 1;
      span {
        color: #3f3f3f;
      }
    }
    .chartBox {
      @include remCalc(height, 516);
      @include remCalc(padding-right, 30);
      div {
        height: 100% !important;
      }
    }
    .warnModuleBox {
      @include remCalc(padding-bottom, 20);
    }
    .warnModule {
      @include remCalc(margin, 10, 30, 0, 0);
      @include remCalc(padding, 14, 30);
      @include remCalc(border-radius, 8);
      background: #eeeeee;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .info {
        font-family: PingFangSC-Regular;
        @include remCalc(font-size, 24);
        color: #999999;
        text-align: left;
      }
      .btn {
        background: #459dff;
        @include remCalc(border-radius, 8);
        @include remCalc(width, 133);
        @include remCalc(height, 48);
        @include remCalc(font-size, 24);
        @include remCalc(line-height, 48);
        text-align: center;
        font-family: PingFangSC-Regular;
        color: #ffffff;
      }
    }
    .chartInfo {
      font-family: PingFangSC-Regular;
      @include remCalc(font-size, 24);
      color: #999999;
      text-align: center;
      @include remCalc(padding, 30, 0);
    }
  }
  .spacing {
    @include remCalc(margin-bottom, 20);
  }
}
